<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>探索XMLHttpRequest对象</title>
    <style type="text/css">
        .wrapper {
            margin: 25px auto;
            border: 1px solid blue ;
            width: 80vw;
        }
        .wrapper>div {
            margin: 10px ;
            border-bottom: 1px solid #dedede;
        }
        .wrapper>div:last-child {
            border-bottom: none;
        }
        .wrapper>.title {
            margin: 10px;
            border: 1px solid blue;
        }
    </style>
        
</head>
<body>

    <h3>探索XMLHttpRequest对象</h3>

    <div class="wrapper static">
        <p class="title">XMLHttpRequest静态属性</p>
    </div>

    <div class="wrapper proto">
        <p class="title">XMLHttpRequest原型属性</p>
    </div>

    <script type="text/javascript">
        let names = Object.getOwnPropertyNames( XMLHttpRequest );
        console.log( names );
        const static = document.querySelector('.static');
        names.forEach( name => {
            let node = document.createElement('div');
            node.innerHTML = name; 
            static.appendChild( node );
        });

        console.log( '- '.repeat(20) );

        names = Object.getOwnPropertyNames( XMLHttpRequest.prototype );
        console.log( names );
        const proto = document.querySelector('.proto');
        names.forEach( name => {
            let node = document.createElement('div');
            node.innerHTML = name; 
            proto.appendChild( node );
        });
    </script>
    
</body>
</html>